<script setup lang="ts">
import List from './components/List.vue'
import {ref,onMounted} from 'vue'
import axios from 'axios'
import type {ChannelItem,ChannelRes} from './types/data'

// 1. 声明响应式列表数据


const channelList = ref<ChannelItem[]>([])

// 2. axios获取后端数据（axios.request<类型>）
const getList = async ()=>{
  // 本地浏览器产生跨域拦截 -> 使用fetch代理
  // const res = await axios.request<ChannelRes>({
  //   url:'http://geek.itheima.net//v1_0/channels'
  // })
  const { data } = await axios.get<ChannelRes>('/api/v1_0/channels')
  console.log('res',data)

  const fetchRes = await fetch('/api/v1_0/channels')
  if(!fetchRes.ok){
    throw new Error("网络错误",fetchRes.status as any);
  }
  // const data = (await fetchRes.json()) as ChannelRes; // 强制断言类型
  // console.log('fetchRes',data)
  // 3. 后端数据复制给响应式列表
  channelList.value = data.data.channels
}
onMounted(()=> getList())
// 4. 响应式列表渲染到模版（类型提示）

const channelId= ref(0)
const tabChange = (id:number)=>{
  channelId.value = id
}
</script>

<template>
  <!-- tab切换 -->
  <van-tabs @change="tabChange">
    <van-tab v-for="item in channelList" :key="item.id"  :title="item.name">
      <!-- 文章列表组件 -->
      <List :channel-id="channelId"/>
    </van-tab>
  </van-tabs>

</template>


